<template>
  <main>
    <div class="all-container">
      <div class="bg-img">
        <img src="../../assets/img/login.png" alt="" />
      </div>
      <div class="login-container">
        <div @keyup.enter="submitForm()" class="login-form-container">
          <el-form
            :model="passForm"
            status-icon
            label-position="top"
            ref="passForm"
            class="passForm"
          >
            <el-form-item>
              <h1 style="color: white; margin-bottom: 10px">注册个人信息</h1>
            </el-form-item>
            <el-form-item prop="username" label="账号名称">
              <el-input
                prefix-icon="el-icon-mobile-phone"
                placeholder="请输入账号"
                type="text"
                clearable
                v-model="passForm.username"
              ></el-input>
            </el-form-item>
            <el-form-item prop="company" label="公司名称">
              <el-input
                prefix-icon="el-icon-lock"
                placeholder="请输入公司名称"
                v-model="passForm.company"
              ></el-input>
            </el-form-item>
            <el-form-item prop="role" label="您的角色">
              <el-select v-model="passForm.role" placeholder="选择你的角色">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="password" label="账户密码">
              <el-input
                prefix-icon="el-icon-lock"
                placeholder="请输入密码"
                type="password"
                show-password
                v-model="passForm.password"
                autoComplete="new-password"
              ></el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword" label="确认密码">
              <el-input
                prefix-icon="el-icon-lock"
                placeholder="请再次输入密码"
                type="password"
                show-password
                v-model="passForm.confirmPassword"
                autoComplete="new-password"
              ></el-input>
            </el-form-item>
            <el-form-item prop="code" :label="codeText" class="verify-code">
              <el-input
                prefix-icon="el-icon-place"
                type="number"
                v-model="passForm.code"
              ></el-input>
            </el-form-item>
            <el-form-item style="text-align: center">
              <div class="active-button">
                <a href="javascript:void(0)" @click="submitForm">
                  <span></span> <span></span> <span></span>
                  <span></span> 立即注册
                </a>
              </div>
            </el-form-item>
          </el-form>
          <div class="signin-now">
            想起来密码了 ？ <a @click="signIn">->去登录</a>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import { register } from "api/login.api";
import { roleOptions, getRoleNameByValue } from "../constants/role";

const verifyCode = {
  p1: 0,
  p2: 0,
};
const generateCode = () => {
  verifyCode.p1 = Math.floor(Math.random() * 10 + 1);
  verifyCode.p2 = Math.floor(Math.random() * 10 + 1);
};
export default {
  name: "Register",
  data() {
    return {
      passForm: {
        username: "",
        password: "",
        confirmPassword: "",
        code: 0,
        role: 0,
        company: "",
      },
      roleOptions: roleOptions,
      loading: false,
    };
  },
  created() {
    generateCode();

    console.log(getRoleNameByValue(this.passForm.role));
  },
  computed: {
    codeText() {
      return `${verifyCode.p1} + ${verifyCode.p2} = ?`;
    },
    // 密码与确认密码不一致
    isBadSubmit() {
      const { confirmPassword, password } = this.passForm;
      return confirmPassword !== password;
    },
  },
  methods: {
    submitForm() {
      this.loading = true;
      const { username, password, confirmPassword, code, company, role } =
        this.passForm;
      const { p1, p2 } = verifyCode;
      if (!username) {
        this.$message.error("账号不能为空");
        return;
      }
      if (this.isBadSubmit || !password || !confirmPassword) {
        this.$message.error("请检查两次密码输入是否一致");
        return;
      }
      if (Number(code) !== p1 + p2) {
        this.$message.error("验证码错误");
        return;
      }
      const request = {
        [username]: {
          username,
          password,
          company,
          role,
        },
      };
      setTimeout(() => {
        const { code: reqCode, msg, data } = register(request);
        console.log(reqCode, msg, data);
        if (reqCode !== 0) {
          this.$message.error(msg);
          return;
        }
        this.$message.success(msg);
        this.signIn();
      }, 0);
    },
    signIn() {
      this.$router.push({ path: "/login" });
    },
  },
};
</script>

<style lang="less" scoped>
.all-container {
  position: relative;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.bg-img {
  > img {
    background-size: cover;
    z-index: -1;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: block;
  }
}
::v-deep {
  .el-button {
    width: 180px;
    border-radius: 10px;
  }
  .el-input__inner {
    border-radius: 8px;
  }
  .verify-code {
    .el-input__inner {
      width: 20%;
    }
  }
  .el-form-item__label {
    color: white;
    font-size: 16px;
  }
}
@keyframes borderDance {
  0% {
    border-color: white;
  }
  25% {
    border-color: red;
  }
  50% {
    border-color: bisque;
  }
  75% {
    border-color: rgb(143, 90, 90);
  }
  100% {
    border-color: blue;
  }
}
@keyframes textDance {
  0% {
    color: white;
    padding: 0px;
  }
  25% {
    color: antiquewhite;
  }
  50% {
    color: bisque;
    padding-left: 10px;
  }
  75% {
    color: rgb(143, 90, 90);
  }
  100% {
    color: white;
    padding-left: 0;
  }
}
::v-deep {
  .el-form-item {
    margin-bottom: 10px;
  }
}
.login-container {
  position: absolute;
  left: 50%;
  z-index: 999;
  top: 50%;
  transform: translate(-50%, -50%);
  .login-form-container {
    padding: 50px 40px 60px;
    width: 560px;
    border-radius: 8px;
    border: white 2px solid;
    box-shadow: 7px 4px 15px 0 rgba(0, 0, 0, 76%);
    animation: borderDance 2s infinite;
  }
  .signin-now {
    color: white;
    > a {
      animation: textDance 2s infinite;
      cursor: pointer;
    }
  }
}
</style>